<!-- @author fzs-->
<template>
  <div>
    <div v-show="showSearch" class="table-search-wrap">
      <slot></slot>
      <div class="search-right-btn">
        <el-button icon="el-icon-search" @click="emitEvent('queryTable')"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="emitEvent('resetQuery')"
          >重置</el-button
        >
      </div>
    </div>
    <el-row v-if="leftButtonArray.length > 0" :gutter="10" class="mb8">
      <el-col :span="1.5">
        <slot name="btnAdd"></slot>
      </el-col>
      <el-col v-for="(item, index) in leftButtonArray" :key="index" :span="1.5">
        <el-button
          v-show="!item.hidden"
          :type="index === 0 ? (item.type ? item.type : 'primary') : item.type"
          :icon="item.icon ? item.icon : ''"
          :loading="item.loading && item.loading === true ? true : false"
          :disabled="item.disabled && item.disabled === true ? true : false"
          @click="emitEvent(item.emitEventName)"
          >{{ item.label }}</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <slot name="btnExtra"></slot>
      </el-col>
      <div class="top-right-btn">
        <el-tooltip
          class="item"
          effect="dark"
          :content="showSearch ? '隐藏搜索' : '显示搜索'"
          placement="top"
        >
          <el-button
            size="mini"
            circle
            icon="el-icon-search"
            @click="toggleSearch()"
          />
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button
            size="mini"
            circle
            icon="el-icon-refresh"
            @click="emitEvent('refreshQuery')"
          />
        </el-tooltip>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'c-table-search',
  props: {
    leftButtonArray: {
      type: Array,
      default: () => {
        return [
          // {
          //   label: '新增',
          //   icon: 'el-icon-plus',
          //   color: '',
          //   type:'',
          //   emitEventName: 'addBtn'
          // }
        ]
      }
    },
    defaultShowSearch: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  emits: ['send-emit-event'],
  data() {
    return {
      showSearch: true
    }
  },
  mounted() {
    this.showSearch = this.defaultShowSearch
  },
  methods: {
    // 上抛事件
    emitEvent(name) {
      this.$emit('send-emit-event', name)
    },
    // 显示隐藏搜索
    toggleSearch() {
      this.showSearch = !this.showSearch
    }
  }
}
</script>
<style scoped lang="less">
.table-search-wrap {
  display: flex;
  .search-right-btn {
    display: flex;
    justify-content: space-between;
    height: 30px;
    flex-wrap: wrap;
    width: 160px;
    .el-button + .el-button,
    .el-checkbox.is-bordered + .el-checkbox.is-bordered {
      margin-left: 0;
    }
  }
}
</style>
